import React from 'react';
import { Carousel, Modal, Image } from 'antd';
import { Photo } from '../types';

interface PhotoCarouselProps {
  photos: Photo[];
  visible: boolean;
  onClose: () => void;
  currentIndex?: number;
}

const PhotoCarousel: React.FC<PhotoCarouselProps> = ({
  photos,
  visible,
  onClose,
  currentIndex = 0
}) => {
  return (
    <Modal
      open={visible}
      onCancel={onClose}
      footer={null}
      width="90%"
      style={{ top: 20 }}
      bodyStyle={{ padding: 0 }}
    >
      <Carousel
        autoplay
        dots={{ className: 'custom-dots' }}
        initialSlide={currentIndex}
        style={{ backgroundColor: '#000' }}
      >
        {photos.map((photo) => (
          <div key={photo.id} style={{ position: 'relative' }}>
            <Image
              src={photo.url}
              alt={photo.title}
              style={{
                width: '100%',
                height: '70vh',
                objectFit: 'contain',
              }}
              preview={false}
            />
            <div
              style={{
                position: 'absolute',
                bottom: 0,
                left: 0,
                right: 0,
                background: 'linear-gradient(transparent, rgba(0,0,0,0.7))',
                color: 'white',
                padding: '20px',
                textAlign: 'center',
              }}
            >
              <h3 style={{ margin: 0, fontSize: 24, marginBottom: 8 }}>{photo.title}</h3>
              {photo.description && (
                <p style={{ margin: 0, fontSize: 16, opacity: 0.9 }}>{photo.description}</p>
              )}
            </div>
          </div>
        ))}
      </Carousel>
    </Modal>
  );
};

export default PhotoCarousel;
